<template>
  <view>
    <u-navbar :background="{ background: '' }" back-icon-color="#fff" :immersive="true" :border-bottom="false"></u-navbar>
    <view class="">
      <image src="https://wenzhen.jiangkukeji360.com/static/index/huifu.png" mode="widthFix" style="width: 100%"></image>
    </view>
    <view class="" style="margin: 28rpx; background: #eaf0ff; border-radius: 20rpx; display: flex; align-items: center; justify-content: space-between">
      <view class="">
        <view class="" style="font-size: 42rpx; font-weight: bold; padding: 43rpx 0 15rpx 34rpx" v-if="list[current]">{{ list[current].department_name }}权威医生</view>
        <view class="" style="font-size: 28rpx; padding: 0 0 20rpx 32rpx">极速响应·专业问诊·保护隐私</view>
        <view class="" style="font-size: 26rpx; padding: 0 0 65rpx 33rpx">工作时间:9：30-20：00</view>
        <view class="" style="padding-left: 46rpx; padding-bottom: 56rpx" v-if="list1[0]">
          <text style="font-size: 32rpx; font-weight: bold">￥{{ list1[0].inquiry.price }}</text>
          <!-- <text style="font-size: 24rpx;color: #999999;padding-left: 7rpx;">￥6/次</text> -->
          <text style="font-size: 26rpx; color: #ff7251; padding-left: 16rpx">剩余{{ list1[0].inquiry.surplus_number }}次</text>
        </view>
      </view>
      <view class="" style="width: 213rpx; height: 213rpx; position: relative" v-if="list1[0]">
        <image :src="list1[0].doctor_avatar" mode="aspectFit" style="width: 172rpx; border-radius: 16rpx; height: 213rpx"></image>
        <view class="btn" style="position: absolute; bottom: 0" @tap="coke(list1[0].doctor_id)">立即咨询</view>
      </view>
    </view>
    <!-- 快速专家 -->
    <view class="" style="display: flex; align-items: center; justify-content: center">
      <image src="https://wenzhen.jiangkukeji360.com/static/index/left.png" mode="" style="width: 50rpx; height: 10rpx"></image>
      <view class="" style="font-size: 34rpx; font-weight: bold; padding-left: 12rpx; padding-right: 12rpx">为您推荐快速回复的专家</view>
      <image src="https://wenzhen.jiangkukeji360.com/static/index/right.png" mode="" style="width: 50rpx; height: 10rpx"></image>
    </view>
    <view class="" style="font-size: 26rpx; color: #199fff; display: flex; align-items: center; justify-content: center; padding-top: 15rpx">
      <view class="">·半小时回复</view>
      <view class="" style="padding-left: 59rpx; padding-right: 45rpx">·三甲资质</view>
      <view class="">·专家本人问诊</view>
    </view>
    <!-- 科室 -->
    <view class="" style="display: flex; align-items: center; flex-wrap: wrap; margin: 0 0 0 28rpx">
      <view :class="current == k ? 'on' : 'on1'" v-for="(i, k) in list" :key="k" @tap="(current = k), getList(1)" style="margin-right: 21rpx; margin-top: 32rpx">
        {{ i.department_name }}
      </view>
    </view>
    <scroll-view scroll-y="true" id="box" :style="{ height: boxHeight + 'px' }" @scrolltolower="getList">
      <!-- 医生 -->
      <view class="" style="margin: 28rpx; background: #fff; border-radius: 20rpx; position: relative" v-for="(i, k) in list1" :key="k" @tap="coke(i.doctor_id)">
        <view class="" style="display: flex">
          <view class="" style="position: relative; margin: 43rpx 35rpx 0 30rpx">
            <image :src="i.doctor_avatar" mode="aspectFill" style="width: 112rpx; height: 112rpx; border-radius: 50%"></image>
            <view
              class=""
              style="
                width: 64rpx;
                height: 34rpx;
                background: #ff7251;
                border-radius: 17rpx;
                font-size: 22rpx;
                color: #fff;
                text-align: center;
                line-height: 34rpx;
                position: absolute;
                top: 89rpx;
                left: 23rpx;
              "
            >
              {{ i.level_name }}
            </view>
          </view>
          <!-- 医师信息 -->
          <view class="" style="padding-top: 50rpx">
            <view class="" style="display: flex; align-items: flex-end">
              <view class="" style="font-size: 32rpx">
                {{ i.doctor_name }}
              </view>
              <view class="" style="font-size: 26rpx; padding-left: 16rpx">
                {{ i.doctor_title }}
              </view>
            </view>

            <view class="" style="display: flex; align-items: flex-end; font-size: 26rpx; color: #666666; padding-top: 10rpx">
              <view class="">
                {{ i.department_name }}
              </view>
              <view class="" style="padding-left: 29rpx">
                {{ i.hospital_name }}
              </view>
            </view>

            <view class="" style="display: flex; align-items: center; padding-top: 10rpx">
              <view class="">
                <text style="font-size: 28rpx; color: #e50014">{{ i.score }}</text>
                <text style="font-size: 26rpx; color: #999999; padding-left: 9rpx">分</text>
              </view>
              <view class="" style="padding-left: 26rpx">
                <text style="font-size: 28rpx; color: #e50014">{{ i.evaluate_nums }}</text>
                <text style="font-size: 26rpx; color: #999999; padding-left: 9rpx">评价</text>
              </view>
              <view class="" style="padding-left: 27rpx">
                <text style="font-size: 28rpx; color: #e50014">{{ i.order_nums }}</text>
                <text style="font-size: 26rpx; color: #999999; padding-left: 9rpx">服务数</text>
              </view>
            </view>
            <view class="" style="font-size: 26rpx; color: #999999; padding-top: 15rpx; padding-right: 50rpx">擅长：{{ i.disease }}</view>
            <view class="" style="display: flex; align-items: center; margin-top: 23rpx">
              <view class="btn1" style="background: #ffede8; margin-right: 30rpx" v-for="n in i.lable">
                {{ n.label_title }}
              </view>
            </view>
          </view>
        </view>
        <view class="" style="display: flex; align-items: center; justify-content: flex-end; margin-top: 29rpx; padding-bottom: 24rpx">
          <view class="" style="display: flex; align-items: center">
            <view class="" style="font-size: 36rpx; font-weight: bold; padding-right: 7rpx">￥{{ i.inquiry.price }}</view>
            <view class="" style="font-size: 26rpx; color: #999999; text-decoration: line-through; padding-right: 16rpx">
              <!-- ￥6/次 -->
            </view>
            <view class="" style="font-size: 26rpx; color: #ff7251; margin-right: 73rpx">剩余{{ i.inquiry.surplus_number }}次</view>
          </view>
          <view class="btn" style="margin-right: 23rpx">立即咨询</view>
        </view>

        <view class="" style="display: flex; align-items: center; position: absolute; right: 0; top: 0">
          <view
            class=""
            style="
              background: #efd5a2;
              border-radius: 4rpx 0px 0px 4rpx;
              font-size: 20rpx;
              color: #3c3c3c;
              text-align: center;
              line-height: 36rpx;
              font-size: 20rpx;
              padding: 9rpx 8rpx 9rpx 7rpx;
            "
          >
            三甲
          </view>
          <view class="" style="background: #3c3c3c; border-radius: 0px 20rpx 0px 0px; font-size: 20rpx; color: #efd5a2; text-align: center; line-height: 36rpx; padding: 8rpx">
            知名三甲专家
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      current: 0,
      scrollTop: 0,
      list: [],
      page: 1,
      boxHeight: '',
      list1: [],
      reply: {}
    };
  },
  //方法
  methods: {
    coke(e) {
	  console.log(e,'11111');
	  let num=this.list1[0].inquiry.surplus_number;
      uni.navigateTo({
        url: '/doctor/doctor/doctor?id=' + e +'&num='+num
      });
    },
    getList(e) {
      if (e == 1) {
        this.list1 = [];
        this.page = 1;
      }
      this.api({
        url: '/api/doctor/getReplyList',
        method: 'post',
        data: {
          type: 2,
          department_id: this.list[this.current].department_id,
          page: this.page
        }
      }).then((res) => {
        this.list1 = this.list1.concat(res.data.doctor_list);
		console.log(this.list1,'123123123123123123123');
        this.reply = res.data.reply;
        this.page++;
      });
    },
    department() {
      this.api({
        url: '/api/doctor/department',
        method: 'post'
      }).then((res) => {
        this.list = res.data;
        this.getList(1);
      });
    },
    box() {
      const query = uni.createSelectorQuery().in(this);
      query
        .select('#box')
        .boundingClientRect((data) => {
          this.boxHeight = this.screenHeight - data.top - 50;
        })
        .exec();
    }
  },
  //首页渲染
  onLoad(options) {
    this.department();
  },
  //监听
  watch: {},
  //计算属性
  computed: {},
  onReady() {
    this.box();
  }
};
</script>

<style lang="scss" scoped>
page {
  background: #f8f8f8;
}
.btn {
  width: 170rpx;
  height: 62rpx;
  background: linear-gradient(0deg, #1a9eff 0%, #0fb8ff 100%);
  border-radius: 31rpx;
  text-align: center;
  line-height: 62rpx;
  color: #fff;
  font-size: 28rpx;
}
.on {
  width: 158rpx;
  height: 68rpx;
  background: #1a9eff;
  border-radius: 10rpx;
  text-align: center;
  font-size: 28rpx;
  color: #fff;
  line-height: 68rpx;
}
.on1 {
  width: 158rpx;
  height: 68rpx;
  background: #eeeeee;
  border-radius: 10rpx;
  text-align: center;
  font-size: 28rpx;
  color: #666666;
  line-height: 68rpx;
}
.btn1 {
  width: 140rpx;
  height: 41rpx;
  background: #fff1e5;
  border-radius: 4rpx;
  text-align: center;
  line-height: 41rpx;
  font-size: 24rpx;
  color: #ff801e;
}
</style>
